<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 设备故障记录
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">

                <el-select v-model="query.productLine" placeholder="所在产线" class="handle-select mr10">
                    <el-option
                            v-for="item in productLine"
                            :key="item.id"
                            :label="item.lineName"
                            :value="item.id">
                    </el-option>
                </el-select>
                <el-select v-model="query.status" placeholder="维修状态" class="handle-select mr10">
                    <el-option key="1" label="" value=""></el-option>
                    <el-option key="2" label="等待维修" value="-1"></el-option>
                    <el-option key="3" label="正在维修" value="0"></el-option>
                    <el-option key="4" label="已维修" value="1"></el-option>
                </el-select>
                <el-input v-model="query.equipNum" placeholder="输入编号查询" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                <!--        增加记录        -->
                <el-button type="primary" icon="el-icon-zoom-in" @click="handleAdd">上报</el-button>
            </div>
            <!--height="1500"-->
            <el-table
                    :data="tableData"
                    border
                    class="table"

                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    :row-class-name="tableRowClassName"
            >
                <el-table-column type="selection" width="55" align="center"></el-table-column>
                <el-table-column type="index" width="65" align="center" label="序号" ></el-table-column>
                <el-table-column prop="equipment.equipNum" label="设备编号" sortable width="110" align="center"></el-table-column>
                <el-table-column prop="productLine.lineName" label="所处产线" sortable width="110" align="center"></el-table-column>
                <el-table-column prop="reportPerson" label="上报人" sortable width="110" align="center"></el-table-column>
                <el-table-column prop="confirmPerson" label="审核人" sortable width="110" align="center"></el-table-column>
                <el-table-column prop="createDate" label="上报时间" sortable width="110" align="center"></el-table-column>
                <el-table-column prop="status" label="状态" :formatter="statusFormat" sortable width="90" align="center"></el-table-column>
                <el-table-column prop="content" label="故障描述"></el-table-column>
                <el-table-column label="操作" width="90" align="center">
                    <template slot-scope="scope">
                        <el-dropdown >
                            <el-button type="primary" plain>
                                操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item @click.native="handleEdit(scope.$index, scope.row)">编辑</el-dropdown-item>
                                <el-dropdown-item @click.native="saveDelete(scope.$index, scope.row)">删除</el-dropdown-item>
                                <el-dropdown-item @click.native="fix(scope.$index, scope.row)">派修</el-dropdown-item>
                                <el-dropdown-item @click.native="check(scope.$index, scope.row)">审查</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                        align="center"
                ></el-pagination>
            </div>

        </div>
        <!-- 添加弹出框 -->
        <el-dialog title="添加故障记录" :visible.sync="addVisible" width="30%">
            <el-form ref="addForm" :model="addForm" :rules="rules" label-width="95px">
                <el-form-item label="设备编号" prop="equipment">
                    <el-select v-model="addForm.equipment" value-key="id" class="handle-select mr10">
                        <el-option
                                v-for="item in equipmentList"
                                :key="item.id"
                                :label="item.equipNum"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="故障描述" prop="content"><el-input v-model="addForm.content"></el-input></el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveAdd">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑弹出框 -->
        <el-dialog title="编辑故障" :visible.sync="editVisible" width="30%">
            <el-form ref="addForm" :model="addForm" :rules="rules" label-width="100px">
                <el-row>
                    <el-col :span="11">
                        <el-form-item label="设备编号" >
                            <el-input v-model="editEquipment.equipNum" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2"><el-form-item></el-form-item></el-col>
                    <el-col :span="11">
                        <el-form-item label="恢复设备状态" >
                            <el-select v-model="editEquipment.status" >
                                <el-option key="1" label="闲置中" :value='0'></el-option>
                                <el-option key="2" label="运行中" :value='1'></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="设备编号" prop="equipment" >
                    <el-select v-model="addForm.equipment" value-key="id" class="handle-select mr10">
                        <el-option
                            v-for="item in equipmentList"
                            :key="item.id"
                            :label="item.equipNum"
                            :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="故障描述" prop="content"><el-input v-model="addForm.content"></el-input></el-form-item>            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 查看弹出框 -->
        <el-dialog title="查看维修报告" :visible.sync="lookVisible" width="30%">
            <el-form ref="form" :model="equipReportData" label-width="95px">
                <el-form-item label="故障类型"><el-input :disabled="true" v-model="equipReportData.faultType"></el-input></el-form-item>
                <el-form-item label="故障原因"><el-input :disabled="true" v-model="equipReportData.faultReason"></el-input></el-form-item>
                <el-form-item label="故障描述"><el-input :disabled="true" type="textarea" v-model="equipReportData.faultDesc"></el-input></el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="lookVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'equipRepair',
    data() {
        return {
            query: {
                equipNum: '',
                productLine:'',
                status: '',
                pageIndex: 1,
                pageSize: 50
            },
            productLine:{},
            addForm:{},
            equipmentList:[],
            tableData: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            lookVisible: false,
            addVisible: false,
            pageTotal: 0,
            editEquipment:{},
            rules: {
                equipment: [{ required: true, message: '请选择设备编号', trigger: 'blur' }],
                content: [{ required: true, message: '请描述故障', trigger: 'blur' }],

            },
            equipReportData: {},
            idx: -1,
            id: -1
        };
    },
    created() {
        this.getData();
        this.getEquipmentList();
        this.getProductLine();
    },
    methods: {
        //获取产线下拉列表
        getProductLine(){
            this.$axios.get('/api/productLine/selectAll').then(res =>{
                if (res.data.code!=='200') {
                    this.$message.error(res.data.message);
                }else {
                    this.productLine = res.data.data;
                }

            })
        },

        //审查
        check(index,row){
            if(row.status==="1"){
                this.$message.error("该设备已经维修完成");
            }else{
                row.confirmPerson = JSON.parse(localStorage.getItem("userInfo")).name;
                this.$axios.post('/api/equip/checkEquipError',row).then(res=>{
                    if(res.data.code==="200"){
                        this.$message.success(res.data.message);
                        this.getData();
                    }else {
                        this.$message.error(res.data.message);
                    }

                })
            }
        },

        //派修
        fix(index,row){
            if(row.status==="1"){
                this.$message.error("该设备已经维修完成不可派修");
            }else if (row.status==="0"){
                this.$message.error("该设备正在维修中，不可派修");
            } else {
                this.$axios.post('/api/equip/fixEquipError',row).then(res=>{

                    if(res.data.code==="200"){
                        this.$message.success(res.data.message);
                        this.getData();
                    }else {
                        this.$message.error(res.data.message);
                    }

                })
            }
        },
        //删除
        saveDelete(index,row){
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    if (row.status!=="1"){
                        this.$message.error("该设备未维修，不能删除该记录！");
                    }else{
                        this.$axios.get('/api/equip/delEquipError?id='+row.id).then(res=>{
                            if(res.data.code==="200"){
                                this.$message.success(res.data.message);
                                this.getData();
                            }else {
                                this.$message.error(res.data.message);
                            }

                        })
                    }
                })
                .catch(() => {});
        },
        //获取设备编号下拉列表
        getEquipmentList(){
            this.$axios.get('/api/equip/selectEquipAva').then(res =>{
                if (res.data.code!=="200"){
                    this.$message.error(res.data.message);
                } else {
                    this.equipmentList=res.data.data;
                }

            });
        },

        getData() {
            this.$axios.get('/api/equip/selectEquipError').then(res =>{
                if (res.data.code!=="200"){

                    this.$message.error(res.data.message);
                } else {
                    this.pageSplit(res.data.data);
                }

            });

        },
        //tableData 翻译status
        statusFormat(row, column){

            if (row.status === '0') {
                return '正在维修'
            } else if (row.status === '1') {
                return '已维修'
            } else if (row.status === '-1') {
                return '等待维修'
            }
        },
        handleSearch() {
            this.$axios.get('/api/equip/equipErrorSearch?equipNum='+this.query.equipNum+'&productLine='+this.query.productLine+'&status='+this.query.status).then(res =>{
                if (res.data.code!=="200"){
                    this.$message.error(res.data.message);
                } else {
                    this.pageSplit(res.data.data);
                }
            })

        },
        //添加操作
        handleAdd() {

            this.addVisible = true;
        },
        // 修改故障设备记录操作
        handleEdit(index, row) {
            if(row.status==="-1"){
                console.log(row);
                this.idx = index;
                this.addForm=row;
                this.editEquipment=this.addForm.equipment;
                this.editEquipment.status=0;
                this.editVisible = true;
            }else {
                this.$message.error("不可修改已经派修的故障记录");
            }

        },
        // 保存编辑
        saveEdit() {
            this.editVisible = false;
            this.$refs.addForm.validate(valid => {
                if (valid) {
                    this.addForm.reportPerson = JSON.parse(localStorage.getItem("userInfo")).name;
                    this.addForm.status="-1";

                    this.$axios.post('/api/equip/editEquipError',{equipError:this.addForm,editEquip:this.editEquipment}).then(res=>{
                        if (res.data.code==="200"){
                            this.$message.success(res.data.message);
                            this.getData();
                            this.getEquipmentList();
                            this.addForm={};
                            this.editEquipment={};
                        } else {
                            this.$message.error(res.data.message);
                        }
                    });
                }else {
                    this.$message.error('请检查输入');
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        //保存添加
        saveAdd(){
            this.$refs.addForm.validate(valid => {
                if (valid) {
                    this.addVisible = false;
                    this.addForm.reportPerson = JSON.parse(sessionStorage.getItem("userInfo")).name;
                    this.addForm.status="-1";
                    this.$axios.post('/api/equip/addEquipError',this.addForm).then(res=>{
                        if(res.data.code==='200'){
                            this.$message.success(res.data.message);
                            this.addForm={};
                            this.getEquipmentList();
                            this.getData();
                        }else {
                            this.$message.error(res.data.message);
                        }
                    });
                }
                else {
                    this.$message.error('请检查输入');
                    console.log('error submit!!');
                    return false;
                }
            })
        },
        //每行带颜色
        tableRowClassName({row, rowIndex}) {
            if(row.status==='-1')
                return 'erro-row';
            if(row.status==='1')
                return 'success-row';
            else return 'warning-row';
        },
        // 分页导航
        handlePageChange(val) {

            this.$set(this.query, 'pageIndex', val);
            console.log(this.query.pageIndex);
            this.getData();
        },
        pageSplit(data){
            this.pageTotal=data.length;
            let start= (this.query.pageIndex-1)*this.query.pageSize;
            let end = this.query.pageIndex*this.query.pageSize<this.pageTotal?this.query.pageIndex*this.query.pageSize:this.pageTotal;
            this.tableData=[];
            for (let i=start;i<end;i++){
                this.tableData[i-start]=data[i];
            }
        },
    }
};
</script>
<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .el-table .erro-row {
        background: #ffe4e8;
    }
</style>
<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
